<template>
    <el-card v-if="isShowReport" class="reportCard">
        <el-table :data="queryData.slice((currentPage - 1) * pageSize, (currentPage * pageSize))" stripe style="width: 100%"
            height="580px">
            <el-table-column prop="事件编号" label="事件编号" width="170" align="center" />
            <!-- <el-table-column prop="id" label="ID" width="170" align="center" /> -->
            <el-table-column prop="事件类型" label="事件类型" width="170" align="center" />
            <el-table-column prop="事件等级" label="事件等级" width="170" align="center" />
            <el-table-column prop="发生时间" label="发生时间" width="170" align="center" />
            <el-table-column prop="发生地点" label="发生地点" width="170" align="center" />
            <el-table-column prop="车牌号" label="车牌号" width="170" align="center" />
            <el-table-column prop="驾驶员" label="驾驶员" width="170" align="center" />
            <el-table-column prop="处理状态" label="处理状态" width="170" align="center">
                <template #default="scope">
                    <select v-model="scope.row.处理状态" class="m-2 select" placeholder="Select" size="large"
                        @change="updateState(scope.row.事件编号)" :class="'bg' + scope.row.处理状态">
                        <option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                            :style="{ color: item.bgColor }"></option>
                    </select>
                    <el-button type="primary" @click="update(scope.row.处理状态)">更新</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination v-model:current-page="currentPage" :page-size="pageSize" background
                layout="total, prev, pager, next" :total="queryData.length" @current-change="handleCurrentChange" />
            <el-button type="info" @click="close">关闭</el-button>
        </div>
    </el-card>
</template>
  
<script setup>
import { queryVectorLayerByRect } from './hooks/checkReport'
import { useMenuStore } from "../../store";
import { queryByAttr } from './hooks/query'
import { updatapoint } from './hooks/update'


let $store = useMenuStore()
let queryData = ref();
const isShowReport = ref(false)
const close = () => {
    isShowReport.value = false
    $store.setIndex('4')
}
/* 状态选择 */
const options = [
    {
        value: '0',
        label: '待处理',
        bgColor: "red"
    },
    {
        value: '1',
        label: '处理中',
        bgColor: "orange"
    },
    {
        value: '2',
        label: '已归档',
        bgColor: "green"
    },
]
let service = {
    name: "guanggu",
    layerId: 2,
};
const updateState = (item) => {
    queryByAttr({
        item,
        service,
        callback: handleQuery,
    })
}
let fid
let position
const handleQuery = (data) => {
    console.log(data, 1)
    var format = new Zondy.Format.PolygonJSON();
    //将MapGIS要素JSON反序列化为ol.Feature类型数组
    var features = format.read(data);
    console.log(features, 2)
    fid = data.SFEleArray[0].FID
    position = features[0].geometryChangeKey_.target.flatCoordinates
    console.log(fid, position, 3333)
    if (fid && position) {
        ElMessage({
            message: '已成功连接到服务器, 请点击更新按钮进行更新',
            type: 'success',
        })
    } else {
        ElMessage({
            message: '服务器连接异常, 请稍后再试',
            type: 'warning',
        })
    }
}
const update = (state) => {
    let attr = [{
        name: "处理状态", type: "number", value: state
    }]
    console.log(fid, position, attr, 'test')
    updatapoint(fid, position, attr, service)
}
/* 分页器 */
const currentPage = ref(1)
const pageSize = ref(10)
const handleCurrentChange = (val) => {
    currentPage.value = val
}

watch(() => $store.activeIndex, val => {
    // console.log(val)
    if (val === "3-3") {
        let geomObj = new Zondy.Object.Rectangle(71.97, 10.50, 138.575, 55.79);
        queryVectorLayerByRect({
            geomObj,
            callback: res => {
                queryData.value = res.reverse().map(item => {
                    let _item = null
                    _item = item.values_.values_
                    _item.id = item.id_
                    return _item
                })
            }
        })
        isShowReport.value = true
    } else {
        isShowReport.value = false
    }
})

</script>
  
<style lang='scss' scoped>
.reportCard {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
}

.select:hover {
    cursor: pointer;
}

.bg0 {
    color: red;
}

.bg1 {
    color: orange;
}

.bg2 {
    color: green;
}

.pagination {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}
</style>